
<!doctype html>
<html>
	<head>
		<style>
			#demo {
				overflow:scroll;
				margin-top:5em;
			}
		
			.w { 
				width:5em;
				padding:1em;
				position:absolute;
				border: 1px solid black;
				z-index:4;
				border-radius:1em;
				 border:1px solid #346789;
box-shadow: 2px 2px 19px #e0e0e0;
   -o-box-shadow: 2px 2px 19px #e0e0e0;
   -webkit-box-shadow: 2px 2px 19px #e0e0e0;
   -moz-box-shadow: 2px 2px 19px #e0e0e0;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
cursor:move;
			}
			
			.aLabel {
				background-color:white;
				opacity:0.8;
				padding:0.3em;				
			}
			
			.ep {
				float:right;
				width:1em;
				height:1em;
				background-color:#994466;
				cursor:pointer;
			}
			
			._jsPlumb_endpoint {
				z-index:3;
			}
		/*	._jsPlumb_connector { border:1px solid red; }*/
			
			#opened {
				left:10em;
				top:5em;
			}
			
			#olga {
				left:10em;
				top:12em;
				width:7em;
			}
			#nicola {
				left:13em;
				top:25em;
			}
			#inperson {
				left:27em;
				top:22em;
			}
			#rejected {
				left:10em;
				top:35em;
			}
			.dragHover { border:1px dotted red; }
			
			path { cursor:pointer; }
		</style>
	</head>
	<body>
		<div style="position:absolute">
		<div id="demo">
		<div class="w" id="opened">opened<div class="ep"></div></div>
		<div class="w" id="olga">telephone interview with olga<div class="ep"></div></div>
		<div class="w" id="nicola">telephone interview with nicola<div class="ep"></div></div>
		<div class="w" id="inperson">in person<div class="ep"></div></div>
		<div class="w" id="rejected">rejected<div class="ep"></div></div>
		</div>
		</div>
	
	 	<script type="text/javascript" src="jquery-1.6.3.js"></script>
		<script type="text/javascript" src="jqueryui-1.8.13.js"></script>
		<script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
		<!-- main jsplumb engine -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-1.3.4-RC1.js"></script>
		<!-- connectors, endpoint and overlays  -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-defaults-1.3.4-RC1.js"></script>
		
		<!-- state machine connectors -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-connectors-statemachine-1.3.4-RC1.js"></script>
		
		<!-- SVG renderer -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-svg-1.3.4-RC1.js"></script>
		<!-- canvas renderer -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-canvas-1.3.4-RC1.js"></script>
		<!-- vml renderer -->
		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-renderers-vml-1.3.4-RC1.js"></script>
		<!-- jquery jsPlumb adapter -->
		<script type="text/javascript" src="../../js/1.3.4/jquery.jsPlumb-1.3.4-RC1.js"></script>					            	

		<script type="text/javascript" src="../../js/1.3.4/jsPlumb-fx-0.1-RC1.js"></script>				
		
		<script>
		
		
		var curColourIndex = 1, maxColourIndex = 24, nextColour = function() {
			var R,G,B;
			R = parseInt(128+Math.sin((curColourIndex*3+0)*1.3)*128);
			G = parseInt(128+Math.sin((curColourIndex*3+1)*1.3)*128);
			B = parseInt(128+Math.sin((curColourIndex*3+2)*1.3)*128);
			curColourIndex = curColourIndex + 1;
			if (curColourIndex > maxColourIndex) curColourIndex = 1;
			return "rgb(" + R + "," + G + "," + B + ")";
		};
		
			jsPlumb.ready(function() {
				
				jsPlumb.setRenderMode(jsPlumb.SVG);
						
				jsPlumb.logEnabled = true;
				jsPlumb.setDebugLog(function(m) {
					$("#debug").html(m);
				});
				
				jsPlumb.Defaults.Connector = [ "StateMachine", { avoidSelector:$(".w") } ];
				jsPlumb.Defaults.Endpoint = ["Dot", {radius:2}];				
				jsPlumb.Defaults.HoverPaintStyle = {strokeStyle:"yellow", lineWidth:2 };	
				jsPlumb.Defaults.Overlays = [
							[ "Arrow", { 
								location:1, 
								id:"arrow"
							} ]/*,
							[ "Arrow", { 
								location:0.5, 
								id:"arrow2"
							} ]	*/		
				];
				
				jsPlumb.draggable(jsPlumb.CurrentLibrary.getSelector(".w"));
											
				jsPlumb.bind("click", function(c) { 
					jsPlumb.detach(c); 
				});
				
				// make each ".ep" div a source and give it some parameters to work with.  here we tell it
				// to use a Continuous anchor and the StateMachine connectors, and also we give it the
				// connector's paint style.  note that in this demo the strokeStyle is dynamically generated,
				// which prevents us from just setting a jsPlumb.Defaults.PaintStyle.  but that is what i 
				// would recommend you do.
				$(".ep").each(function(i,e) {
					var p = $(e).parent();
					jsPlumb.makeSource($(e), {
						parent:p,
						endpoint:{
							anchor:"Continuous",
							connector:"StateMachine",
							connectorStyle:{ strokeStyle:nextColour(),lineWidth:2 },
							maxConnections:-1
						}						
					});
				});
				
				jsPlumb.makeTarget($(".w"), {
					dropOptions:{ hoverClass:"dragHover" },
					endpoint:{
						anchor:"Continuous"
					}
				});
			});
		</script>
	</body>
</html>
